<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <first :testprops="title" @getSon="getSonData"></first> -->
    <slotDemo>
      <div class="testslot">
        slot在父组件中的插槽
      </div>
      <template v-slot:diy="slotDemo">
        具名插槽diy 
        作用域绑定:子组件插槽传值给父插槽使用{{slotDemo.msg1}} 
      </template>
    </slotDemo>
    <router-link to="/first" tag="button" replace>跨域豆瓣Api</router-link>
    <router-link :to="{path:'/HelloWorld',
    query:{
      tagnum1:5,
      tagnum2:6
    }}" 
    tag="button" replace>父传子，子改父data</router-link>
    <button @click="routepush">测试this.$router.push()</button>
    <router-view></router-view>
  </div>
</template>

<script>
import first from './components/first';
import slotDemo from './components/slotDemo';
export default {
  name: 'App',
  data:function(){
    return {
      title:"test"
    }
  },
  components:{
    first,
    slotDemo
  },
  methods:{
    getSonData(data){
      console.log(data);
    },
    routepush(){
      // 循环三次之后跳转
      [1,2,3].forEach(element => {
        console.log(element);
      });
      // replace浏览器不可返回
      this.$router.replace({
        path:'/',
        query:{
          username:'zhangsan',
          age:18
        }
      });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
